{% extends "admin/base.html" %}

{% block title %}评论管理{% endblock %}
{% block page_title %}评论管理{% endblock %}

{% block content %}
<div class="card shadow">
    <div class="card-body">
        {% if comments.items %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>评论者</th>
                        <th>评论内容</th>
                        <th>文章</th>
                        <th>状态</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for comment in comments.items %}
                    <tr class="{% if comment.is_spam %}table-danger{% elif not comment.is_approved %}table-warning{% endif %}">
                        <td>
                            {% if comment.guest_name %}
                                <strong>{{ comment.guest_name }}</strong>
                                <br><small class="text-muted">{{ comment.guest_email }}</small>
                                {% if comment.guest_website %}
                                <br><a href="{{ comment.guest_website }}" target="_blank" class="text-decoration-none">
                                    <i class="fas fa-external-link-alt"></i> 网站
                                </a>
                                {% endif %}
                                {% if comment.author %}
                                <br><small class="text-muted">注册用户: {{ comment.author.username }}</small>
                                {% endif %}
                            {% elif comment.author %}
                                <strong>{{ comment.author.username }}</strong>
                                <br><small class="text-muted">注册用户</small>
                            {% else %}
                                <strong>匿名用户</strong>
                            {% endif %}
                        </td>
                        <td>
                            <div style="max-width: 300px; word-wrap: break-word;">
                                {{ comment.content[:100] }}{% if comment.content|length > 100 %}...{% endif %}
                            </div>
                        </td>
                        <td>
                            <a href="{{ url_for('main.post_detail', slug=comment.post.slug) }}" 
                               class="text-decoration-none" target="_blank">
                                {{ comment.post.title }}
                            </a>
                        </td>
                        <td>
                            {% if comment.is_spam %}
                            <span class="badge bg-danger">垃圾</span>
                            {% elif comment.is_approved %}
                            <span class="badge bg-success">已审核</span>
                            {% else %}
                            <span class="badge bg-warning">待审核</span>
                            {% endif %}
                        </td>
                        <td>{{ comment.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                {% if not comment.is_approved and not comment.is_spam %}
                                <button type="button" class="btn btn-outline-success" 
                                        onclick="approveComment({{ comment.id }})">
                                    <i class="fas fa-check"></i>
                                </button>
                                {% endif %}
                                {% if not comment.is_spam %}
                                <button type="button" class="btn btn-outline-warning" 
                                        onclick="spamComment({{ comment.id }})">
                                    <i class="fas fa-ban"></i>
                                </button>
                                {% endif %}
                                <button type="button" class="btn btn-outline-danger" 
                                        onclick="deleteComment({{ comment.id }})">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        {% if comments.pages > 1 %}
        <nav aria-label="评论分页">
            <ul class="pagination justify-content-center">
                {% if comments.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admin.comments', page=comments.prev_num) }}">上一页</a>
                </li>
                {% endif %}
                
                {% for page_num in comments.iter_pages() %}
                    {% if page_num %}
                        {% if page_num != comments.page %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('admin.comments', page=page_num) }}">{{ page_num }}</a>
                        </li>
                        {% else %}
                        <li class="page-item active">
                            <span class="page-link">{{ page_num }}</span>
                        </li>
                        {% endif %}
                    {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                    {% endif %}
                {% endfor %}
                
                {% if comments.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admin.comments', page=comments.next_num) }}">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-comments fa-3x text-muted mb-3"></i>
            <h4 class="text-muted">还没有评论</h4>
            <p class="text-muted">等待访客发表评论。</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- Comment Detail Modal -->
<div class="modal fade" id="commentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">评论详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="commentDetail"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function approveComment(commentId) {
    if (confirm('确定要审核通过这条评论吗？')) {
        fetch(`/admin/comments/${commentId}/approve`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请重试');
        });
    }
}

function spamComment(commentId) {
    if (confirm('确定要将此评论标记为垃圾吗？')) {
        fetch(`/admin/comments/${commentId}/spam`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请重试');
        });
    }
}

function deleteComment(commentId) {
    if (confirm('确定要删除这条评论吗？此操作不可恢复！')) {
        fetch(`/admin/comments/${commentId}/delete`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请重试');
        });
    }
}

function viewComment(commentId) {
    // 这里可以实现查看评论详情的功能
    const modal = new bootstrap.Modal(document.getElementById('commentModal'));
    modal.show();
}
</script>
{% endblock %}

